import { OperateBase } from '../../common/operate-base';
import { ScalePlugin } from '../../../pugins/scale.plugin';
import './scale.less';
export class Scale extends OperateBase {
    protected container: HTMLElement;
    protected plugin: ScalePlugin;
    protected barContentEle: HTMLDivElement;
    protected dotEle: HTMLDivElement;
    protected percentEle: HTMLDivElement;
    protected controlContainer: HTMLDivElement;
    constructor() {
        super();
    }
    public selectChange() {

    }
    public afterDomInit() {
        this.plugin = this.zTableInstance.pluginManager.getPlugin(ScalePlugin.pluginName);
    }
    public getDom() {
        this.container = document.createElement('div');
        this.container.setAttribute('class', this.containerClassName);
        this.container.innerHTML=`<span class="z-tools-icon icon iconfont icon-fangda"></span>`;
        this.addScaleControl();
        let ele = this.container.querySelector('.icon-fangda');
        ele.addEventListener('click', () => {
            this.controlContainer.removeAttribute('style');
            setTimeout(() => {
                let maxLeft = this.barContentEle.clientWidth;
                let currentScale = this.plugin.getCurrentScale();
                let left = currentScale * maxLeft / 2;
                this.dotEle.setAttribute('style', `left: ${left}px`);
                let percent = currentScale;
                this.percentEle.innerText = Math.ceil(percent * 100) + '%'
            });
        });
        return this.container;
    }
    protected addScaleControl() {
        this.controlContainer = document.createElement('div') as HTMLDivElement;
        this.controlContainer.setAttribute('class', 'z-excel-tools-scale-container');
        this.controlContainer.setAttribute('style', 'display:none;')
        this.controlContainer.innerHTML = `
            <div class="z-excel-tools-scale-barContainer">
                <div class="z-excel-tools-scale-content">
                    <div class="z-excel-tools-scale-scroll-content">
                        <div class="z-excel-tools-scale-dot" style="left: 100px;">
                        </div>
                    </div>
                    <div class="z-excel-tools-scale-value">
                        100%
                    </div>
                </div>
            <div>
        `;
        this.controlContainer.addEventListener('mousedown', (evt: Event) => {
            if(evt.target != this.controlContainer) {
                return;
            }
            this.controlContainer.setAttribute('style', 'display: none');
        });
        this.barContentEle = this.controlContainer.querySelector('.z-excel-tools-scale-scroll-content');
        this.controlContainer.querySelector('.z-excel-tools-scale-content').addEventListener('click', (evt) => {
            evt.stopPropagation();
            evt.preventDefault();
        });
        this.dotEle = this.controlContainer.querySelector('.z-excel-tools-scale-dot');
        this.percentEle = this.controlContainer.querySelector('.z-excel-tools-scale-value');
        this.dotEle.addEventListener('mousedown', (downEvt) => {
            let originX = downEvt.clientX;
            let originLeft = Number(this.dotEle.style.left.replace('px', ''));
            let maxLeft = this.barContentEle.clientWidth;
            this.dotEle.classList.add('z-excel-tools-scale-dot-active');
            let transaction = this.plugin.begin();
            const mouseMove = (moveEvt: MouseEvent) => {
                let moveX = moveEvt.clientX - originX;
                let currentLeft = (() => {
                    let temp = originLeft + moveX;
                    if(temp >= maxLeft / 4 && temp <= maxLeft) {
                        return temp;
                    }
                    if(temp < maxLeft / 4) {
                        return maxLeft / 4;
                    }
                    if(temp > maxLeft) {
                        return maxLeft;
                    }
                })();
                this.dotEle.style.left = currentLeft + 'px';
                let percent = Math.ceil(currentLeft / (maxLeft / 2) * 100);
                transaction.setScale(percent / 100);
                this.percentEle.innerText = percent + '%'
            }
            const mouseUp = (upEvt: MouseEvent) => {
                this.dotEle.classList.remove('z-excel-tools-scale-dot-active');
                transaction.commit();
                document.removeEventListener('mousemove', mouseMove);
                document.removeEventListener('mouseup', mouseUp);
            }
            document.addEventListener('mousemove', mouseMove);
            document.addEventListener('mouseup', mouseUp);
        });
        this.container.append(this.controlContainer);
    }
}